<script setup lang="ts">
import { ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { showToast } from 'vant'
import { get, post } from '../../utils/request'
const username = useRoute().query.username
const password = ref('')
const router = useRouter()
// 登录逻辑占位
const chgmima=async()=>{
    try{
        let res= await post('/wyq/chgmima',{username:username,password:password.value})
        if(res.data.code===200){
            showToast({
                message: '密码修改成功',
                type: 'success',
                onClose: () => {
                    router.push(`/login`)
                }
            })
        }else{
            showToast({
                message: '密码修改失败',
                onClose: () => {
                    router.push(`/ziliao?username=${username}`)
                }
            })
        }
    }catch(err){
        showToast({
            message: '密码修改失败',
            onClose: () => {
                router.push(`/index/home`)
            }
        })
    }
   
}
</script>

<template>
    <div>
        <van-nav-bar title="重新设置密码" left-arrow @click-left="router.back()" />
        <div class="login-wrapper">
            <div class="login-body">
                <h3 class="login-title">设置新密码</h3>
                <van-field v-model="password" label="新密码" type="password" placeholder="请输入密码" input-align="left"
                    clearable class="field">
                </van-field>

                <van-field  label="再次输入" type="password" placeholder="请输入密码" input-align="left"
                    clearable class="field">
                </van-field>

                <van-button type="primary" block round class="login-button" @click="chgmima">
                    继续
                </van-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 32px 24px;
    box-sizing: border-box;
}

.login-title {
    text-align: center;
    margin-bottom: 24px;
}

.field {
    margin-bottom: 16px;
}

.login-button {
    margin-top: 12px;
    background-color: black;
    border: none;
}





</style>
